<template>
<div>
  <div class="box">
    <div id="chart" class="chart" ref="chart"></div>
  </div>
</div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
export default {
  props: {
    pieList: {}
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    pieList: {
      handler() {
        // console.log(5555555, newName)
        this.initChart()
      },
      deep: true,
    }
  },
  methods: {
    initChart() {
      var chart = {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0,
          fitToPlot: true
        },
        backgroundColor: 'transparent',
        // height: 180,
        // width: 180
        // spacingTop: 0,
      };
      var title = {
        disable: true,
        show: false,
        enabled: false,
        text: '',
        margin: 0,
        floating: true,
      };
      var tooltip = {
        enabled: false,
        // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      };
      var colors = ['#44d27c', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF']; //设置饼图颜色
      var credits = {
        enabled: false //禁用版权url    此处不设置，  会显示highecharts.com
      };
      var plotOptions = {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 18, //饼图厚度
          // color:pieColors,
          dataLabels: {
            distance: 0, //设置引导线的长度
            // color:'red',//全局设置字体颜色
            // enabled: true,
            // format: '{point.name}',
            formatter: function () { //设置字体与引导线和饼图颜色一致
              // if (this.point.name == '中国') {
              //   return '<span style="color:#FF0000">[' + this.point.name + ' ' + Highcharts.numberFormat(this.percentage, 2) + '%]</span>';
              // } else if (this.point.name == '美国') {
              //   return '<span style="color:#00FF00">[' + this.point.name + ' ' + Highcharts.numberFormat(this.percentage, 2) + '%]</span>';
              // } else if (this.point.name == '俄罗斯') {
              //   return '<span style="color:#0000FF">[' + this.point.name + ' ' + Highcharts.numberFormat(this.percentage, 2) + '%]</span>';
              // } else if (this.point.name == '英国') {
              //   return '<span style="color:#FFFF00">[' + this.point.name + ' ' + Highcharts.numberFormat(this.percentage, 2) + '%]</span>';
              // } else if (this.point.name == '朝鲜') {
              //   return '<span style="color:#00FFFF">[' + this.point.name + ' ' + Highcharts.numberFormat(this.percentage, 2) + '%]</span>';
              // } else if (this.point.name == '日本') {
              //   return '<span style="color:#FF00FF">[' + this.point.name + ' ' + Highcharts.numberFormat(this.percentage, 2) + '%]</span>';
              // }
            }
            /* style: {
                 fontSize: '10px',//设置字体大小
                 fontFamily: 'Verdana, sans-serif'
             }*/
          }
        }

      };
      var series = [{
        type: 'pie',
        name: 'Browser share',
        startAngle: 180, //调整饼图的角度   方向：顺时针
        // data: [{
        //   name: 'point1',
        //   y: 30,
        //   color: '#4580FE'
        // }, {
        //   name: 'point2',
        //   y: 60,
        //   color: '#00C7F4'
        // }, {
        //   name: 'point3',
        //   y: 30,
        //   color: '#D06B29'
        // }, {
        //   name: 'point4',
        //   y: 30,
        //   color: '#44D27C'
        // }]
        data: this.pieList.dataList
      }]

      var json = {};
      json.chart = chart;
      json.title = title;
      // json.backgroundColor = backgroundColor;
      json.tooltip = tooltip;
      json.colors = colors; // 设置饼图颜色
      json.credits = credits;
      json.plotOptions = plotOptions;
      json.series = series;
      // this.chart = Highcharts.chart('chart', json)
      this.chart = Highcharts.chart(this.$refs.chart, json)
    }
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background: rgba(0, 0, 0, 0);
  // height: 2.65rem;

  .chart {
    background: rgba(0, 0, 0, 0);
    // width: 100%;
    // height: 2.65rem;
    width: 1.5rem;
    height: 1.48rem;
  }
}
</style>
